import { computed, defineComponent, ref } from 'vue';
import Align from './Align.vue';
import Basic from './Basic.vue';
import Floating from './Floating.vue';
import Indicators from './Indicators.vue';
import Outline from './Outline.vue';
import Rounded from './Rounded.vue';
import Transparent from './Transparent.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Align</h5>
            <Align />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Floating</h5>
            <Floating />
          </div>
          <div class='block-'>
            <h5 class='title'>Indicators</h5>
            <Indicators />
          </div>
          <div class='block-'>
            <h5 class='title'>Outline</h5>
            <Outline />
          </div>
          <div class='block-'>
            <h5 class='title'>Rounded</h5>
            <Rounded />
          </div>
          <div class='block-'>
            <h5 class='title'>Transparent</h5>
            <Transparent />
          </div>
        </div>
      );
    };
  },
});
